/**
 * useState 是react提供的一个函数，可以帮我们生成一个实现数据驱动页面的函数。
 * useState 该函数生成数据，当数据变了，可以实现页面的更新（无需dom操作）
 *
 * useEffect 也是一个函数，可以接受两个参数
 * 参数1：是一个回调函数，在页面第一个加载或者是以后数据发生变化后，自动执行的回调函数。
 * 参数2：是可选的，
 *  如果不传递的话，则参数1在组件第一个加载，和 useState 生成的数据发生变化后，都会执行。
 *  如果要传递的话，可以传递如下的参数
 *      传递一个空数组，那么就只会在组件第一次加载的时候执行
 *      传递一个有元素的数据，数组里面的元素就是 useState 生成的变量数据，当变量数据发生变化的时候，参数1回调函数执行。
 *
 *
 useEffect 这个 api 可以使用多次

        mouned updated
        useEffect(() => {
            console.log('useEffect');
        })

        monted
        useEffect(() => {
        console.log('useEffect');
        }, [])

        vue mouned updated
        useEffect(() => {
            console.log('useEffect');
        }, [count])
*
 *
 */
import {useState, useEffect} from 'react';

function Counter() {
    /*这样解构的时候，我们尽量做到变量见名知意*/
    let [count, setCount] = useState(0);

    /*vue mouned updated api*/
    useEffect(() => {
        console.log('useEffect0');
    }, [count])


    useEffect(() => {
        console.log('useEffect1');
    }, [count])

    useEffect(() => {
        console.log('useEffect2');
    }, [count])

    function increment() {
        setCount(count + 1);
    }

    function decrement() {
        setCount(count - 1);
    }

    return (
        <div>
            <h1>我是一个计数器</h1>
            <p>
                1. 结构 2. 样式 3. 行为 4. 数据 5. 生命周期函数（指的是框架提供的一些特定的api，我们以后只需要在里面进行相关的业务操作，框架自动在特定时间进行调用。）
            </p>
            <button onClick={increment} style={{fontSize: '30px'}}>+</button>
            <b id="container">{count}</b>
            <button onClick={decrement} style={{fontSize: '30px'}}>-</button>
        </div>
    )
}

export default Counter;
